import React from 'react'
import { Carousel } from 'antd-mobile'
import axios from '../../utils/request'
import { Grid, WingBlank, Flex } from 'antd-mobile'
import SearchHead from '../../components/SearchHead'

import './Index.scss'
import { getCurrentCity } from '../../utils/getCurrentCity'

const groupsData = [
  {
    title: '整租',
    img: require('../../assets/images/nav-1.png'),
    path: '/home/list'
  },
  {
    title: '合租',
    img: require('../../assets/images/nav-2.png'),
    path: '/home/list'
  },
  {
    title: '地图找房',
    img: require('../../assets/images/nav-3.png'),
    path: '/map'
  },
  {
    title: '去出租',
    img: require('../../assets/images/nav-4.png'),
    path: '/login'
  }
]

const baseUrl = 'http://localhost:8080'

export default class Index extends React.Component {
  state = {
    swipers: [],
    flag: false,
    groups: [],
    newsList: [],
    position: [],
    currentCity: ''
  }
  async componentDidMount() {
    //拉数据
    //轮播
    this.getSwipers()
    //租房小组
    this.getGroups()
    //资讯
    this.getNews()
    //IP定位城市
    const currentCity = await getCurrentCity()
    // console.log(currentCity)
    this.setState({
      currentCity
    })
  }

  async getSwipers() {
    //轮播图的请求
    const { status, body } = await axios.get('/home/swiper')
    if (status === 200) {
      // console.log(body)
      this.setState({
        swipers: body,
        flag: true
      })
    }
  }

  async getGroups() {
    //租房小组的请求
    const { status, body } = await axios.get(
      '/home/groups?area=AREA%7C88cff55c-aaa4-e2e0'
    )
    if (status === 200) {
      this.setState({
        groups: body
      })
    }
  }

  async getNews() {
    //获取资讯
    const { status, body } = await axios.get(
      '/home/news?area=AREA%7C88cff55c-aaa4-e2e0'
    )
    if (status === 200) {
      this.setState({
        newsList: body
      })
      // console.log(body)
    }
  }

  renderSwiper = () => {
    return this.state.swipers.map(e => (
      <a
        key={e.id}
        href="http://baidu.com"
        style={{
          display: 'inline-block',
          width: '100%',
          height: 212
        }}
      >
        <img
          src={'http://localhost:8080' + e.imgSrc}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  renderGroupsItem = item => {
    return (
      <div className="rent-item">
        <div className="info">
          <p className="title">{item.title}</p>
          <p className="details">{item.desc}</p>
        </div>
        <img src={baseUrl + item.imgSrc} alt="" />
      </div>
    )
  }

  renderNewsList() {
    return this.state.newsList.map(e => {
      return (
        <li key={e.id}>
          <Flex>
            <img src={baseUrl + e.imgSrc} alt="" />
            <div>
              <Flex direction="column" justify="between">
                <h4 className="info">{e.title}</h4>
                <p className="source">
                  <span>{e.from}</span>
                  <span>{e.date}</span>
                </p>
              </Flex>
            </div>
          </Flex>
        </li>
      )
    })
  }

  render() {
    // console.log(this.state.currentCity)
    // const currentCity = this.state.currentCity.label
    return (
      <div>
        <div className="swiper" onClick={this.handleClick}>
          <SearchHead className="search-head"></SearchHead>
          {/* 用flag来实现组件延迟加载,flag为true时,数据以获取到 */}
          {this.state.flag && (
            <Carousel autoplay infinite>
              {this.renderSwiper()}
            </Carousel>
          )}
        </div>
        <div className="nav">
          {groupsData.map(e => {
            return (
              <div
                className="nav-con"
                key={e.title}
                onClick={() => {
                  this.props.history.push(e.path)
                }}
              >
                <img src={e.img} alt="" />
                <p>{e.title}</p>
              </div>
            )
          })}
        </div>
        {/* 租房小组 */}
        <div className="rent-group">
          <h3 className="sub-title">
            <span>租房小组</span>
            <span className="rent-more">更多</span>
          </h3>
          <Grid
            hasLine={false}
            data={this.state.groups}
            columnNum={2}
            itemStyle={{ width: 172, height: 85 }}
            renderItem={this.renderGroupsItem}
          />
        </div>
        {/* 最新资讯 */}
        <WingBlank>
          <div className="recent-info">
            <h3 className="recent-title">最新资讯</h3>
            <ul>{this.renderNewsList()}</ul>
          </div>
        </WingBlank>
      </div>
    )
  }
}
